<template>
    <div class="personal">
       <el-container>
           <el-aside width="200px">
                <h3>个人中心</h3>
                <div>
                   <router-link :to="{path:'recharge'}" class="aqua-button recharge-btn" tag="button">入金/充值</router-link>
                </div>
                <div>
                   <router-link :to="{path:'withdraw'}" class="withdraw-btn" tag="button">出金/提现</router-link>
                </div>
                <router-link :to="{ path: 'index' }" tag="div" class="font-size-14 hand"  :class="this.$route.path == '/user/index' ? 'active': '' "><span>个人信息</span></router-link>
                <div  class="font-size-14 hand" @click="changeState('account')" > <span class="border-top-span">账户管理
                   <i v-show="!accountState" class="el-icon-arrow-down padding-left-5"></i>
                   <i v-show="accountState" class="el-icon-arrow-up padding-left-5"></i>
                   </span> 
                </div>
                <ul v-show="accountState">                
                    <router-link :to="{ path: 'account' }" tag="li" :class=" this.$route.path == '/user/account' ? 'active': '' "   class="font-size-12 hand">DC账户</router-link>
                    <router-link :to="{ path: 'bank' }" tag="li" :class=" this.$route.path.indexOf('user/bank') > 0 ? 'active': '' "   class="font-size-12 hand hide">银行卡</router-link>
                  
                </ul>              
                <div class="font-size-14 hand" :class="navTabs == 'record' ? 'active': '' "  @click="changeState('record')"> <span class="border-top-span">交易记录
                   <i  v-show="!recordState" class="el-icon-arrow-down padding-left-5"></i>
                   <i  v-show="recordState" class="el-icon-arrow-down padding-left-5"></i>
                   </span>
                </div>
                    <ul v-show="recordState">
                        <router-link :to="{ path: 'rechargeRecord' }" tag="li" class="font-size-12 hand"  :class="this.$route.path == '/user/rechargeRecord' ? 'active': '' "><span>入金记录</span></router-link>
                        <router-link :to="{ path: 'withdrawRecord' }" tag="li" class="font-size-12 hand"  :class="this.$route.path == '/user/withdrawRecord' ? 'active': '' "><span>出金记录</span></router-link>
                        <router-link :to="{ path: 'orderRecord' }" tag="li" class="font-size-12 hand"  :class="this.$route.path == '/user/orderRecord' ? 'active': '' "><span>订单交易记录</span></router-link>
                    </ul>
                <div class="loginOut hand font-size-14" @click="logOut()">注销账户</div>
           </el-aside>
            <el-main>
                <router-view></router-view>               
            </el-main>

       </el-container>
    </div>
</template>
<script>
import {mapActions} from 'vuex'
export default {
    name:'personal',
    data(){
        return{
           
            accountState:false,
            recordState:false,
            navTabs:'user',
        }
    },
    mounted:function(){
       
    },
    methods:{
        ...mapActions(['logOut']),
        changeState(value){
            this.navTabs = value;
            if(value == 'account'){
                this.accountState = !this.accountState
            }else if(value == 'record'){
                this.recordState = !this.recordState
            }else{
                this.$router.push({ path:'index'})
            }
        }
    }
}
</script>

<style lang="less" scoped>
.personal{
    position: absolute;
    min-height: calc(100% - 60px);
    width: 100%;
    top: 62px;
    background-color: #1b1c38;
    .recharge-btn{padding: 0;line-height: 40px;width: 170px;border-radius: 4px;}
    .withdraw-btn{line-height: 40px;padding: 0;width: 170px;border: 1px solid #4ec2e3;border-radius: 4px;background-color: #1b1c38;color: #fff;letter-spacing: 1px;margin-top: 12px;}
    .el-container{max-width: 1200px;margin: 0 auto;}
    .el-aside{
        position: relative;
        min-height: 700px;
        padding-top: 60px;
        h3{font-size: 26px;font-weight: lighter;line-height: 60px;padding-bottom: 30px;}
        div{line-height: 46px;}
        ul li{padding-left: 26px;line-height: 32px;margin: 8px 0;}
        .loginOut{position: absolute;bottom: 20px;left: 20px;}
        .border-top-span{display: inline-block; width: 120px;border-top: 1px solid #2e2f4d;}
        .active{color: #4ec2E3;}
    } 

}



</style>

